<template>
  <div class="taskPanel" v-wechat-title="'任务中心'">
    <div class="taskHead">
      <div class="leftTt">任务中心</div>
      <div class="taskTab">
        <div v-for="(item,index) in taskTitleList" :class="{taskTitleActive: index==activeIndex}" @click="changeTask(index)"><span>{{item}}<i v-if="hasFinish(index)"></i></span></div>
      </div>
    </div>
    <div class="loadingBox" v-if="loading">
      <Spin fix></Spin>
    </div>
    <div class="noData" v-else-if="taskList.length<1">
      <template v-if="data[0] && data[0].data[0] && data[0].data[0].betting_need_money">
        <div class="actRuleCon">
          <h1>活动规则说明</h1>
          <p>完成以下任意任务即可参与平台常规任务和每日签到活动：</p>
          <p class="text-gray">1. 当天累计充值达<span class="text-red">{{data[0].data[0].recharge_need_money}}</span>元，当前累计充值<span class="text-red">{{data[0].data[0].recharge_money}}</span>元，还差<span class="text-red">{{data[0].data[0].recharge_need_money - data[0].data[0].recharge_money}}</span>元</p>
          <p class="text-gray">2. 当天累计投注达<span class="text-red">{{data[0].data[0].betting_need_money}}</span>元，当前累计投注<span class="text-red">{{data[0].data[0].betting_money}}</span>元，还差<span class="text-red">{{data[0].data[0].betting_need_money - data[0].data[0].betting_money}}</span>元</p>
        </div>
      </template>
      <template v-else>
        <img src="@/assets/images/no-content.png" alt="">
      </template>
    </div>
    <div class="taskList" v-else>
      <div class="taskBox" v-for="(item,index) in taskList">
        <div class="taskBoxLeft">
          <div :class="`bgColor${index}`"><img src="@/assets/images/task.png" alt=""></div>
          <div>{{item.name}}
            <p><span>+{{item.money}}</span>元宝</p>
          </div>
        </div>
        <div class="taskBoxText" v-html="item.explain"></div>
        <div class="taskBoxRight">
          <template v-if="item.task_state != 3">
            <div class="taskBoxState" v-if="item.id==7&&getQdObj.qdState==0">{{item.count}}/7</div>
          </template>
          <template v-if="item.task_state == 2">      
            <div class="taskBoxState" v-if="item.id==8&&item.task_state==2">0/1</div>
            <div class="taskBoxState" v-else-if="item.id==8&&item.task_state==1">1/1</div>            
            <div class="taskBoxState" v-else-if="item.id==9">{{item.recharge}}/{{item.money_bal}}</div>
            <div class="taskBoxState" v-else-if="item.id==10||item.id==11||item.id==12||item.id==13||item.id==14||item.id==15||item.id==16||item.id==17||item.id==18||item.id==19||item.id==24||item.id==25||item.id==26||item.id==27||item.id==28||item.id==29||item.id==30||item.id==31||item.id==32">{{item.betting}}/{{item.money_bal}}</div>
            <div class="taskBoxState" v-else-if="item.id==20||item.id==21||item.id==22||item.id==23">{{item.complete_task}}/{{item.total_task}}</div>
          </template>
          <div class="taskBoxBtn taskBoxBtn1" v-if="item.task_state==1" @click="getAward(item.task_prize_id,index,item.money)">领取奖励</div>
          <router-link :to="{path: '/personalCenter/personalInfo', query: {query:Date.parse(new Date())}}" v-else-if="item.task_state==2&&isUser&&(item.id==2||item.id==3||item.id==4||item.id==5||item.id==6)"><div class="taskBoxBtn taskBoxBtn2">去做任务</div></router-link>  
          <div class="taskBoxBtn taskBoxBtn2" v-else-if="item.task_state==2&&!isUser&&(item.id==2||item.id==3||item.id==4||item.id==5||item.id==6)" @click="notUser">去做任务</div></router-link>  
          <router-link :to="{path:'/personalCenter/cardManager', query: {query:Date.parse(new Date())}}" v-else-if="item.task_state==2&&isUser&&item.id==1"><div class="taskBoxBtn taskBoxBtn2">去做任务</div></router-link>       
          <div class="taskBoxBtn taskBoxBtn2" v-else-if="item.task_state==2&&!isUser&&item.id==1" @click="notUser">去做任务</div>      
          <div class="taskBoxBtn taskBoxBtn2" v-else-if="item.task_state==2&&item.id<7" @click="goHome">去做任务</div>
          <div class="taskBoxBtn taskBoxBtn4" v-else-if="item.task_state==2&&(item.id==20||item.id==21||item.id==22)">领取奖励</div>
          
          <div class="taskBoxBtn taskBoxBtn1" v-else-if="item.task_state==2&&(item.id==7&&getQdObj.qdState==0)" @click="setQd">签到</div>
          <router-link :to="{path:'/topUpCenter/recharge'}" v-else-if="isUser&&(item.task_state==2&&item.id==8||item.task_state==2&&item.id==9)"><div class="taskBoxBtn taskBoxBtn2">去充值</div></router-link>
          <div class="taskBoxBtn taskBoxBtn2" v-else-if="!isUser&&(item.task_state==2&&item.id==8||item.task_state==2&&item.id==9)" @click="notUser">去充值</div>
          <div class="taskBoxBtn taskBoxBtn2" v-else-if="item.task_state==2&&item.id>9&&item.id<20||item.task_state==2&&item.id>23" @click="goHome">去投注</div>
          <div class="taskBoxBtn taskBoxBtn3" v-else-if="item.task_state==3||(item.id==7&&getQdObj.qdState==1)">已完成</div>
        </div>
        
      </div>
      <p v-if="tipsFlag" style="color: #999;">
        注释：任务达成总个数依据今日任务完成数计算，次日将重置计算，未领取的奖励皆为失效处理，本活动的最终解释权归本公司所有
      </p>
    </div>
  </div>
</template>
<script>
import { fetchJson } from "@/common/js/request";
import _ from "lodash";
import { mapGetters, mapActions } from "vuex";

export default {
  props: [],
  beforeCreate() {},
  data() {
    return {
      loading: false,
      isUser: JSON.parse(localStorage.getItem('isUser')),
      data: [],
      taskList: [],
      taskTitleList: [],
      activeIndex: 0,

      tipsFlag: false,
    };
  },
  created() {},
  mounted() {
    this.getData(0)
  },
  computed: {
    ...mapGetters(['getQdObj','accountData'])
  },
  methods: {
    ...mapActions([
      'SET_ACCOUNT_DATA',
    ]),
    changeTask: function(index){
      if (index == 2) {
        this.tipsFlag = true
      }
      this.activeIndex=index
      this.getData(index)
    },
    getData: function(index){
      let arr1=[]
      let arr2=[]
      let arr3=[]
      if(this.taskList.length>0){
        //不是第一次进来
        let rstList = this.data[index].data
        for(var i=0;i<rstList.length;i++){
          if(rstList[i].task_state==1){
            arr1.push(rstList[i])
          }else if(rstList[i].task_state==2){
            arr2.push(rstList[i])
          }else if(rstList[i].task_state==3){
            arr3.push(rstList[i])
          }
        }
        this.taskList=arr1.concat(arr2.concat(arr3))
        return 
      }
      this.loading=true
      fetchJson(this, '?m=api&c=app&a=taskIndex', {
      }).then(result => {
        this.loading=false
        this.taskTitleList=[]
        for(var k=0;k<result.data.length;k++){
          this.taskTitleList.push(result.data[k].name)
        }
        this.data = result.data
        let rstList = result.data[index].data
        for(var i=0;i<rstList.length;i++){
          if(rstList[i].task_state==1){
            arr1.push(rstList[i])
          }else if(rstList[i].task_state==2){
            arr2.push(rstList[i])
          }else if(rstList[i].task_state==3){
            arr3.push(rstList[i])
          }
        }
        this.taskList=arr1.concat(arr2.concat(arr3))        
      }).catch(error => {
        this.loading=false
        console.log(error)
			});
    },
    getAward:function(id,index,money){
      if(!JSON.parse(localStorage.getItem('isUser'))){
        this.$Message.warning('游客暂无权限，请先注册会员')
        return
      }
      if(_.isEmpty(id)){
        this.$Model.warning('领取失败，请刷新后重试')
        return
      }
      fetchJson(this, '?m=api&c=app&a=receiveTaskReward', {
        id: id
      }).then(result => {
        if(result.status==0){
          var that = this
          this.$Modal.success({
            content: '恭喜您获得'+money+'元宝',
            onOk: function(){
              for(var i=0;i<that.taskList.length;i++){
                if(i==index){
                  that.taskList[i].task_state=3
                  break
                }
              }
              var accountData = that.accountData
              accountData.money_usable=parseFloat(accountData.money_usable)
              accountData.money_usable+=parseInt(money)
              that.SET_ACCOUNT_DATA({
                  Obj: accountData
              })
            }
          })
        }else{
          this.$Modal.warning({
          content: result.ret_msg
        })
        }
      });
    },
    goHome: function(){
      if(!JSON.parse(localStorage.getItem('isUser'))){
        this.$Message.warning('游客暂无权限，请先注册会员')
        return
      }
      this.$router.push({
        path: '/home'
      })
    },
    notUser: function(){
      this.$Message.warning('游客暂无权限，请先注册会员')
    },
    hasFinish: function(index){
      for(var j=0;j<this.data.length;j++){
        for(var i=0;i<this.data[j].data.length;i++){
          if(this.data[j].data[i].task_state==1&&j==index||this.data[j].data[i].id==7&&this.data[j].data[i].task_state==2&&j==index){
            return true            
          }
        }
      }
      return false
    },
    setQd: function(){
      if(!JSON.parse(localStorage.getItem('isUser'))){
        this.$Message.warning('游客暂无权限，请先注册会员')
        return
      }
      fetchJson(this,'?m=api&c=app&a=getSignCont',{}).then(result=>{
        if(result.status == 0){
          var qdObj = this.getQdObj
          qdObj.qdCurrent=result.data.count
          qdObj.qdState=result.data.is_sign
          qdObj.qdMoney = result.data.count==6?result.data.money_bal:result.data.money
          fetchJson(this,'?m=api&c=app&a=taskSign',{type: 7}).then(result=>{
            if(result.status==0){
              var qdObj = this.getQdObj
              qdObj.qdState = 1
              qdObj.qdCurrent +=1
              this.$store.commit('setQdObj',qdObj)
              this.$Modal.success({
                content: '签到成功，恭喜您获得'+this.getQdObj.qdMoney+'元宝！'
              })
              var accountData = this.accountData
              accountData.money_usable=parseFloat(accountData.money_usable)
              accountData.money_usable+=parseInt(this.getQdObj.qdMoney)
              this.SET_ACCOUNT_DATA({
                  Obj: accountData
              })
            }else if(result.status==-1){
              this.$Modal.warning({
                content: result.ret_msg
              })
            }
          })
        }
      })
    }
  },
  watch: {
  },
  beforeDestroy() {}
};
</script>
<style scoped>
.text-red {
  color: #DD5D5D;
}
.actRuleCon h1 {
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
}
.actRuleCon .text-gray {
    margin-top: 12px;
}
.actRuleCon .text-red {
    margin: 0 6px;
}

  .taskPanel{width: 1200px;margin: 0 auto;}
  .taskHead{padding: 20px 0px;display: flex;align-items: center;border-bottom: 1px solid #CACACA;}
  .leftTt{font-weight: bold;font-size: 21px;padding-left: 10px;margin-right: 40px;position: relative;}
  .leftTt:before{content: '';
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -12px;
    width: 4px;
    height: 24px;
    border-radius: 2px;
    background-color: #f3596a;}
  .taskTab{display: flex;width: 260px;justify-content: space-between;cursor: pointer;font-size: 16px;}
  .taskTab div{position: relative;}
  .taskTab div i{position: absolute;right: -6px;top: 0px;width: 6px;height: 6px;border-radius: 50%;background: #f3596a}
  .taskTab div:hover{color: #f3596a;}
  .taskTab div span{padding: 10px 0px;font-weight: bold;}
  .taskList{overflow: auto;margin-top: 30px;min-height: 600px;}
  .taskBox{background: white;padding: 10px 20px;box-shadow: 1px 2px 2px 0px rgba(0,0,0,0.2);display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}
  .taskBoxLeft{display: flex;align-items: center;width: 30%;}
  .taskBoxLeft>div:first-child{margin-right: 20px;border-radius: 6px;width: 80px;height: 80px;}
  .taskBoxLeft>div:first-child img{margin-top: 16px;margin-left: 19px;}
  .taskBoxLeft>div:last-child{font-weight: bold;font-size: 18px;}
  .taskBoxLeft>div:last-child p{font-weight: normal;font-size: 14px;}
  .taskBoxLeft>div:last-child p span{color: #f3596a;}
  .taskBoxText{color: #999999;width: 45%}
  .taskBoxBtn{border-radius:24px;color: white;text-align: center;line-height: 36px;width: 120px;cursor: pointer;}
  .taskBoxBtn a{color: white;}
  .taskBoxBtn1{background: #C8313C;}
  .taskBoxBtn2{background: #F48D12;}
  .taskBoxBtn3{background: #fff;color: #01AD0F;}
  .taskBoxBtn4{background: #ccc;}
  .loadingBox{height: 700px;position: relative;}
  .taskTitleActive span{border-bottom: 2px solid #f3596a;color: #f3596a;}
  .taskBoxState{text-align: center;color: #f3596a;font-size: 16px;font-weight: bold;}
  .noData{height: 700px;position: relative;}
  .noData img{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)}

  .bgColor0{background: #8261FF;}
  .bgColor1{background: #618EFF;}
  .bgColor2{background: #61B3FF;}
  .bgColor3{background: #FF8661;}
  .bgColor4{background: #FF6161;}
  .bgColor5{background: #FF6191;}
  .bgColor6{background: #01AD0F;}
  .bgColor7{background: #F48D12;}
  .bgColor8{background: #F40012;}
  .bgColor9{background: #e66652;}
  .bgColor10{background: #f32ab2;}
  .bgColor11{background: #a91ac2;}
  .bgColor12{background: #61B3FF;}
  .bgColor13{background: #FF8661;}
  .bgColor14{background: #FF6161;}
  .bgColor15{background: #F48D12;}
  .bgColor16{background: #8261FF;}
  .bgColor17{background: #618EFF;}
  .bgColor18{background: #61B3FF;}
  .bgColor19{background: #FF8661;}
  .bgColor20{background: #01AD0F;}
  .bgColor21{background: #F48D12;}
  .bgColor22{background: #FF6191;}
  .bgColor23{background: #F40012;}
</style>
<style>
</style>



// WEBPACK FOOTER //
// src/components/personalCenter/taskCenter/taskCenter.vue